<%--
  Created by IntelliJ IDEA.
  User: zhaolh
  Date: 2021/11/4
  Time: 10:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <%-- 引入bootstrap --%>
    <script src="<%=request.getContextPath()%>/js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/js/bootstrap/css/bootstrap.min.css"></link>
    <script src="<%=request.getContextPath()%>/js/bootstrap/js/bootstrap.min.js"></script>

    <%-- 引入dataTables表格插件 --%>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/js/DataTables/css/jquery.dataTables.min.css"></link>
    <script src="<%=request.getContextPath()%>/js/DataTables/js/jquery.dataTables.js"></script>

    <%-- 引入datetimepicker日期插件 --%>
    <link rel="stylesheet"
          href="<%=request.getContextPath()%>/js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"></link>
    <script src="<%=request.getContextPath()%>/js/bootstrap-datetimepicker/js/moment-with-locales.js"></script>
    <script src="<%=request.getContextPath()%>/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

    <%-- 引入bootbox弹框插件 --%>
    <script src="<%=request.getContextPath()%>/js/bootstrap/js/bootbox.min.js"></script>
    <script src="<%=request.getContextPath()%>/js/bootstrap/js/bootbox.locales.min.js"></script>
</head>
<body>

<%-- 导航栏 --%>
<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">飞狐教育</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">用户管理</a></li>
                <li><a href="#">学生管理</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        班级管理 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">jmeter</a></li>
                        <li><a href="#">EJB</a></li>
                        <li><a href="#">Jasper Report</a></li>
                        <li class="divider"></li>
                        <li><a href="#">分离的链接</a></li>
                        <li class="divider"></li>
                        <li><a href="#">另一个分离的链接</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<%-- 条件查询 --%>
<div class="panel panel-primary">
    <div class="panel-heading"><h3 class="panel-title">条件查询</h3></div>
    <div class="panel-body container">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">姓名</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control"
                               placeholder="请输入姓名" id="username">
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">生日</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input type="text" class="form-control" id="minBirthday">
                            <span class="input-group-addon">
                                -
                            </span>
                            <input type="text" class="form-control" id="maxBirthday">
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">爱好</label>
                    <div class="col-sm-8">
                        <label class="checkbox-inline">
                            <input type="checkbox" name="hobby" value="1"> 爬山
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="hobby" value="2"> 游泳
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="hobby" value="3"> 代码
                        </label>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">性别</label>
                    <div class="col-sm-8">
                        <label class="radio-inline">
                            <input type="radio" name="sex" value="1"> 男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sex" value="0"> 女
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-primary" onclick="search()"><span
                            class="glyphicon glyphicon-search"></span>查询
                    </button>
                    <button type="reset" class="btn btn-danger"><span class="glyphicon glyphicon-refresh"></span> 重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<%-- 列表展示 --%>
<div class="panel panel-primary">
    <div class="panel-heading"><h3 class="panel-title">用户列表</h3></div>
    <div class="panel-body">
        <button type="button" class="btn btn-success btn-sm" onclick="addUser()"><span
                class="glyphicon glyphicon-plus"></span>添加
        </button>
        <button type="button" class="btn btn-danger btn-sm" onclick="deleteBatch()"><span class="glyphicon glyphicon-trash"></span> 批量删除
        </button>
        <table class="table table-bordered" id="userTable">
            <thead>
            <tr>
                <th><input type="checkbox" onclick="quanxuan(this)"/></th>
                <th>名称</th>
                <th>性别</th>
                <th>爱好</th>
                <th>生日</th>
                <th>操作</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<%-- 添加页面 --%>
<div style="display: none" id="addUserDiv">
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label class="col-sm-2 control-label">名字</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" id="username1"
                       placeholder="请输入名字">
            </div>
            <span class="col-sm-3">jfldsjdslj </span>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">性别</label>
            <div class="col-sm-5">
                <label class="radio-inline">
                    <input type="radio" name="sex1" value="1"> 男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex1" value="0"> 女
                </label>
            </div>
            <span class="col-sm-3">jfldsjdslj </span>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">爱好</label>
            <div class="col-sm-5">
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby1" value="1"> 爬山
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby1" value="2"> 游泳
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby1" value="3"> 代码
                </label>
            </div>
            <span class="col-sm-3">jfldsjdslj </span>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">生日</label>
            <div class="col-sm-5">
                <input id="addBirthday" class="form-control">
            </div>
            <span class="col-sm-3">jfldsjdslj </span>
        </div>
    </form>
</div>

<%-- 修改页面 --%>
<div style="display: none" id="updateUserDiv">
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label class="col-sm-2 control-label">名字</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" id="username2"
                       placeholder="请输入名字">
                <input type="hidden" class="form-control" id="id">
            </div>
            <span class="col-sm-3">jfldsjdslj </span>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">性别</label>
            <div class="col-sm-5">
                <label class="radio-inline">
                    <input type="radio" name="sex2" value="1"> 男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex2" value="0"> 女
                </label>
            </div>
            <span class="col-sm-3">jfldsjdslj </span>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">爱好</label>
            <div class="col-sm-5">
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby2" value="1"> 爬山
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby2" value="2"> 游泳
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby2" value="3"> 代码
                </label>
            </div>
            <span class="col-sm-3">jfldsjdslj </span>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">生日</label>
            <div class="col-sm-5">
                <input id="updateBirthday" class="form-control">
            </div>
            <span class="col-sm-3">jfldsjdslj </span>
        </div>
    </form>
</div>
</body>
<script type="text/javascript">
    // 页面加载函数
    $(function () {
        initUserTable();
        initMinBirthday();
        initMaxBirthday();
        // 将添加的form表单放到addUserHTML中
        addUserHTML = $("#addUserDiv").html();
        // 将修改的form表单放到updateUserHTML中
        updateUserHTML = $("#updateUserDiv").html();
    })

    // 修改
    function showUpdateUserDiv(id) {
        initUpdateBirthday();
        // 回显
        $.post({
            url: "<%=request.getContextPath()%>/user/queryUserById",
            data: {"id":id},
            success: function (user) {
                $("#id").val(user.id);
                $("#username2").val(user.username);
                $("#updateBirthday").val(user.birthday);
                $("[name=sex2][value='"+user.sex+"']").prop("checked",true);
                $("[name=hobby2]").each(function () { // 1,2,3   1,3   "1,3".indexOf(1)
                    if (user.hobby != null && user.hobby.indexOf(this.value) != -1){
                        this.checked = true;
                    }
                })
            }
        })

        bootbox.confirm({
            title: "<b>修改用户</b>",
            size: "lg",
            message: $("#updateUserDiv form"),
            callback: function (result) {
                // 如果点击了确认按钮，则提交新增form表单中的数据
                if (result) {
                    var param = {};
                    // 获取新增div表单中的值
                    // 获取用户名
                    param.id = $("#id").val();
                    param.username = $("#username2").val();
                    // 获取性别
                    param.sex = $("[name=sex2]:checked").val();
                    // 获取生日
                    param.birthday = $("#updateBirthday").val();
                    // 获取爱好
                    var hobby = "";
                    var hobbies = $("[name=hobby2]:checked");
                    if (hobbies.length > 0) {
                        hobbies.each(function (a, b) {
                            hobby += b.value + ",";
                        })
                        param.hobby = hobby.substring(0, hobby.length - 1);
                    }

                    // 发送新增用户的ajax请求
                    $.ajax({
                        url: "<%=request.getContextPath()%>/user/update",
                        type: "post",
                        data: param,
                        success: function (result) {
                            bootbox.alert("修改成功");
                            search();
                        }
                    })
                }

                // 将修改用户div中的html代码赋给修改用户的div
                $("#updateUserDiv").html(updateUserHTML);
            },
            buttons: {
                confirm: { // 改变确认框的演示
                    label: "确定", // 改变确认框按钮的文字
                    className: "btn-success"
                },
                cancel: { // 改变确认框的演示
                    label: "取消", // 改变确认框按钮的文字
                    className: "btn-danger"
                }
            },
        })
    }

    // 添加
    function addUser() {
        initAddBirthday();
        bootbox.confirm({
            title: "<b>添加用户</b>",
            size: "lg",
            message: $("#addUserDiv form"),
            callback: function (result) {
                // 如果点击了确认按钮，则提交新增form表单中的数据
                if (result) {
                    alert($("#username1").val());
                    var param = {};
                    // 获取新增div表单中的值
                    // 获取用户名
                    param.username = $("#username1").val();
                    // 获取性别
                    param.sex = $("[name=sex1]:checked").val();
                    // 获取生日
                    param.birthday = $("#addBirthday").val();
                    // 获取爱好
                    var hobby = "";
                    var hobbies = $("[name=hobby1]:checked");
                    if (hobbies.length > 0) {
                        hobbies.each(function (a, b) {
                            hobby += b.value + ",";
                        })
                        param.hobby = hobby.substring(0, hobby.length - 1);
                    }

                    // 发送新增用户的ajax请求
                    $.ajax({
                        url: "<%=request.getContextPath()%>/user/addUser",
                        type: "post",
                        data: param,
                        success: function (result) {
                            if (result.success) {
                                bootbox.alert("添加成功");
                                search();
                            }
                        }
                    })
                }

                // 将新增用户div中的html代码赋给新增用户的div
                $("#addUserDiv").html(addUserHTML);
            },
            buttons: {
                confirm: { // 改变确认框的演示
                    label: "确定", // 改变确认框按钮的文字
                    className: "btn-success"
                },
                cancel: { // 改变确认框的演示
                    label: "取消", // 改变确认框按钮的文字
                    className: "btn-danger"
                }
            },
        })
    }

    function initUpdateBirthday() {
        $("#updateBirthday").datetimepicker({
            // 设置日期格式
            format: "YYYY-MM-DD",
            // 设置中文
            locale: "zh-CN",
            // 是否显示清除按钮
            showClear: true
        })
    }

    function initAddBirthday() {
        $("#addBirthday").datetimepicker({
            // 设置日期格式
            format: "YYYY-MM-DD",
            // 设置中文
            locale: "zh-CN",
            // 是否显示清除按钮
            showClear: true
        })
    }

    function initMinBirthday() {
        $("#minBirthday").datetimepicker({
            // 设置日期格式
            format: "YYYY-MM-DD",
            // 设置中文
            locale: "zh-CN",
            // 是否显示清除按钮
            showClear: true
        })
    }

    function initMaxBirthday() {
        $("#maxBirthday").datetimepicker({
            // 设置日期格式
            format: "YYYY-MM-DD",
            // 设置中文
            locale: "zh-CN",
            // 是否显示清除按钮
            showClear: true
        })
    }

    // 条件查询
    function search() {
        userTable.ajax.reload();
    }

    // 列表展示
    function initUserTable() {
        userTable = $('#userTable').DataTable({
            //禁用排序
            "ordering": false,
            //禁用本地搜索
            "searching": false,
            // 设置每页展示条数
            "lengthMenu": [5, 10, 15, 20],
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
            "ajax": {
                "url": "<%=request.getContextPath()%>/user/select",
                "type": "post",
                "data": function (param) {
                    // 获取用户名
                    param.username = $("#username").val();
                    // 获取年龄
                    param.minBirthday = $("#minBirthday").val();
                    param.maxBirthday = $("#maxBirthday").val();
                    // 获取性别
                    param.sex = $("[name=sex]:checked").val();
                    // 获取爱好
                    var hobby = "";
                    var hobbies = $("[name=hobby]:checked");
                    if (hobbies.length > 0) {
                        hobbies.each(function (i, e) { // e代表循环的每一个元素，在这里就代表一个hobby
                            hobby += e.value + ",";
                        })
                        // 将最后一个“，”截取掉   hobby="1,2,3,"
                        hobby = hobby.substring(0, hobby.length - 1);
                        param.hobby = hobby;
                    }

                }
            },
            "columns": [
                {
                    "data": "id",
                    "render": function (data) {
                    return '<input type="checkbox" name="id" value="'+data+'">';
                    }
                },
                {
                    "data": "username"
                },
                {
                    "data": "sex",
                    "render": function (data) {
                        if (data == 1) {
                            return "男";
                        } else if (data == 0) {
                            return "女";
                        } else {
                            return null;
                        }
                    }
                },
                {
                    "data": "hobby",
                    "render": function (data) {
                        return data.replace("1", "爬山").replace("2", "游泳").replace("3", "代码");
                    }
                },
                {
                    "data": "birthday"
                },
                {
                    "data": "id",
                    "render": function (data) {
                        return '<div class="btn-group btn-group-sm"> ' +
                                    '<button type="button" class="btn btn-primary" onclick="showUpdateUserDiv('+data+')"><span class="glyphicon glyphicon-wrench">修改</span></button> ' +
                                    '<button type="button" class="btn btn-danger" onclick="deleteUser('+data+')"><span class="glyphicon glyphicon-trash">删除</span></button>' +
                                '</div>';
                    }
                }
            ]
        });
    }

    // 删除用户
    function deleteUser(id){
        bootbox.confirm({
            message:"您确定要删除吗？",
            callback:function(result){
                if (result){
                    $.post({
                        url: "<%=request.getContextPath()%>/user/delete",
                        data: {"id":id},
                        success: function () {
                           bootbox.alert("删除成功");
                           search();
                        }
                    })
                }
            },
            buttons:{
                confirm:{
                    label:"确认",
                    className:"btn btn-primary"
                },
                cancel:{
                    label:"取消",
                    className:"btn btn-danger"
                }
            }
        })
    }

    // 全选反选
    function quanxuan(obj){
        $("[name=id]").each(function (a,b) {
            b.checked = obj.checked;
        })
    }

    // 批量删除
    function deleteBatch(){
        var ids = [];
        $("[name=id]:checked").each(function () {
            ids.push(this.value)
        })
        if (ids.length > 0){
            bootbox.confirm({
                message:"您确定要删除吗？",
                callback:function(result){
                    if (result){
                        $.post({
                            url: "<%=request.getContextPath()%>/user/deleteBatch",
                            data: {"ids":ids.toString()},
                            success: function () {
                                bootbox.alert("删除成功");
                                search();
                            }
                        })
                    }
                },
                buttons:{
                    confirm:{
                        label:"确认",
                        className:"btn btn-primary"
                    },
                    cancel:{
                        label:"取消",
                        className:"btn btn-danger"
                    }
                }
            })
        }else {
            bootbox.alert("请至少选择一项！");
        }
    }
</script>
</html>
